<!-- 带资格角的盒子组件 -->
<template>
  <div class="box">
    <div class="header">
      <div class="left">
        <span>{{ boxTitle }}</span>
      </div>
    </div>
    <div class="main">
      <div id="echartRbox"></div>
    </div>

    <div class="pos pos_bl"></div>
    <div class="pos pos_br"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  props: {
    // 盒子标题
    boxTitle: {
      type: String,
      default: () => {
        return "能力图谱";
      }
    }
  },
  data() {
    return {
      showDropDown: false, // 是否展开下拉菜单
      activeDropDown: 0, // 当前选中的下拉菜单
      charts: null
    };
  },
  methods: {
    initChart() {
      this.charts = echarts.init(document.getElementById("echartRbox"));
    },
    drawPie() {
      var option;
      option = {
        title: {
          //   text: "Referer of a Website",
          //   subtext: "Fake Data",
          //   left: "center"
        },
        tooltip: {
          trigger: "item"
        },
        color: [
          "#0d4da2",
          "#8bb75b",
          "#e7b44a",
          "#dd6a1f",
          "#efaf9a",
          "#97bdde"
        ],
        // grid:{
        //     left:"10%"
        // },
        legend: {
          //   orient: "vertical",
          //   right: "right",
          orient: "vertical",
          left: "80%", //图例距离左的距离
          y: "bottom", //图例上下居中,
          //   top:"90%",
          textStyle: {
            color: "#fff"
          }
        },
        series: [
          {
            // name: "Access From",
            type: "pie",
            radius: "50%",
            // roseType: 'angle',
            center: ["42%", "50%"],
            data: [
              { value: 35, name: "矩形框标注" },
              { value: 25, name: "多边形标注" },
              { value: 10, name: "打点标注" },
              // { value: 10, name: "划线标注" },
              { value: 10, name: "语音切割" },
              { value: 15, name: "文本标注" },
              // { value: 5, name: "韵律标注" },
              { value: 5, name: "视频标注" }
            ],
            // emphasis: {
            //   itemStyle: {
            //     shadowBlur: 10,
            //     shadowOffsetX: 0,
            //     shadowColor: "rgba(0, 0, 0, 0.5)"
            //   }
            // },
            label: {
             normal: {
                    formatter: '{b|{b}}{a|{d}%}\n\n',
                    borderWidth: 20,
                    borderRadius: 4,
                    // padding: [0, -70],
                    rich: {
                        a: {
                            color: '#fff',
                            fontSize: 12,
                            lineHeight: 20
                        },
                        b: {
                            fontSize: 12,
                            lineHeight: 20,
                            color: '#fff'
                        }
                    }
                }
            },
            labelLine: {
              //引导线设置
               normal: {
                    // length: 20,
                    // length2: 70,
                    lineStyle: {
                        color: '#fff'
                    }
                }
            }
          }
        ]
      };

      option && this.charts.setOption(option);
    }
  },
  mounted() {
    this.initChart();
    this.drawPie();
  }
};
</script>

<style lang="scss" scoped>
.box {
  position: relative;
  padding: 10px;
  background: #152149;
   background: url(~assets/boardImg/u160.svg) no-repeat;
  background-size: 100% auto;
  .header {
    height: 30px;
    .left {
      // float: left;
      font-size: 0;
      span {
        display: inline-block;
        padding-left: 40px;
        line-height: 30px;
        font-size: 18px;
        font-weight: bold;
        color: #fff;
        vertical-align: bottom;
      }
    }
  }
  .main {
    height: 335px;
    width: 100%;
    #echartRbox {
      height: 100%;
      width: 100%;
    }
  }
  .pos {
    position: absolute;
    width: 20px;
    height: 20px;
    box-sizing: border-box;
  }
  .pos_bl {
    bottom: 0;
    left: 0;
    border-bottom: 2px solid #667aaa;
    border-left: 2px solid #667aaa;
  }
  .pos_br {
    bottom: 0;
    right: 0;
    border-bottom: 2px solid #667aaa;
    border-right: 2px solid #667aaa;
  }
}
</style>